<template>
	<view class="container">
		<!-- 重新设计的顶部导航栏 -->
		<view class="modern-header">
			<view class="search-section" @click="goToSearch">
				<view class="search-bar-wrapper">
					<uni-icons type="search" size="18" color="#999"></uni-icons>
					<text class="search-placeholder">搜索商品</text>
				</view>
			</view>
			<view class="action-section">
				<view class="icon-wrapper" @click="goToCart">
					<uni-icons type="cart" size="24" color="#333"></uni-icons>
				</view>
				<view class="icon-wrapper ml-10" @click="goToMessages">
					<uni-icons type="chat" size="24" color="#333"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 分类导航 -->
		<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
			<view class="category-list">
				<view 
					v-for="(item, index) in categories" 
					:key="index" 
					class="category-item"
					:class="{ active: currentCategory === item.id }"
					@click="switchCategory(item.id)"
				>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 商品推荐轮播 -->
		<view class="featured-section" v-if="currentCategory === 'all'">
			<view class="section-header">
				<text class="section-title">热门推荐</text>
				<view class="section-more" @click="goToFeatured">
					<text>查看更多</text>
					<uni-icons type="arrow-right" size="14" color="#999"></uni-icons>
				</view>
			</view>
			<swiper class="featured-swiper" circular indicator-dots autoplay>
				<swiper-item v-for="(item, index) in featuredProducts" :key="index" class="featured-item">
					<image :src="item.image" mode="aspectFill" class="featured-image"></image>
					<view class="featured-info">
						<text class="featured-title">{{ item.title }}</text>
						<text class="featured-price">¥ {{ item.price }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
        
		
		<!-- 商品列表 -->
		<view class="section-header">
			<text class="section-title">新品上市</text>
			<view class="filter-options">
				<text class="filter-option" :class="{ active: currentSort === 'default' }" @click="setSort('default')">默认</text>
				<text class="filter-option" :class="{ active: currentSort === 'sales' }" @click="setSort('sales')">销量</text>
				<text class="filter-option" :class="{ active: currentSort === 'price' }" @click="setSort('price')">
					价格
					<uni-icons :type="currentSort === 'price' && priceAsc ? 'arrow-up' : 'arrow-down'" size="12"></uni-icons>
				</text>
			</view>
		</view>
		
		<!-- 移除scroll-view，使用普通view -->
		<view class="product-list">
			<view class="product-grid">
				<view v-for="(item, index) in products" :key="index" class="product-card" @click="goToProduct(item.id)">
					<image :src="item.image" mode="aspectFill" class="product-image"></image>
					<view class="product-info">
						<text v-if="item.brand" class="product-brand">{{ item.brand }}</text>
						<text class="product-title">{{ item.title }}</text>
						<view class="product-footer">
							<text class="product-price">¥{{ item.price }}</text>
							<view class="product-action">
								<uni-icons type="star" size="18" color="#999"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
			
		<!-- 加载更多提示 -->
		<view class="loading-more" v-if="isLoading">
			<uni-icons type="spinner-cycle" size="16" color="#999" class="loading-icon"></uni-icons>
			<text>加载中...</text>
		</view>
		
		<!-- 无更多数据提示 -->
		<view class="no-more" v-if="!hasMore && products.length > 0">
			<text>— 没有更多商品了 —</text>
		</view>
		
		<!-- 注释掉自定义tabbar -->
		<!-- <custom-tabbar currentPage="index"></custom-tabbar> -->
	</view>
</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar.vue'
	
	export default {
		components: {
			CustomTabbar
		},
		onLoad() {
			// 不再需要隐藏官方tabbar
			// uni.hideTabBar();
		},
		// 添加页面触底事件
		onReachBottom() {
			console.log("页面触底，加载更多");
			this.loadMoreProducts();
		},
		data() {
			return {
				currentCategory: 'all',
				currentSort: 'default',
				priceAsc: false,
				isLoading: false,
				hasMore: true,
				page: 1,
				categories: [
					{ id: 'all', name: '全部' },
					{ id: 'clothing', name: '服装' },
					{ id: 'shoes', name: '鞋包' },
					{ id: 'accessories', name: '配饰' },
					{ id: 'digital', name: '数码' },
					{ id: 'home', name: '家居' },
					{ id: 'beauty', name: '美妆' }
				],
				featuredProducts: [
					{
						id: 101,
						image: 'https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8ZmFzaGlvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
						title: '2023夏季新款时尚系列',
						price: 1599
					},
					{
						id: 102,
						image: 'https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fGZhc2hpb258ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						title: '限时折扣 - 春季外套系列',
						price: 899
					}
				],
				// 商品列表数据
				products: [
					{
						id: 1,
						image: 'https://images.unsplash.com/photo-1604176424472-17cd740f74e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fGZhc2hpb24lMjBvdmVyc2l6ZWR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						brand: 'TRENDY',
						title: '简约设计感宽松上衣',
						price: 399,
						sales: 230,
						sizes: ['S', 'M', 'L']
					},
					{
						id: 2,
						image: 'https://images.unsplash.com/photo-1551854716-8b811be39e7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGJsYWNrJTIwcGFudHN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						brand: 'URBAN',
						title: '高腰直筒休闲裤',
						price: 580,
						sales: 189,
						sizes: ['S', 'M']
					},
					{
						id: 3,
						image: 'https://images.unsplash.com/photo-1491897554428-130a60dd4757?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzJ8fGZsYXQlMjBzaG9lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
						title: '复古玛丽珍鞋',
						price: 720,
						sales: 125,
						sizes: ['36', '37', '38']
					},
					{
						id: 4,
						image: 'https://images.unsplash.com/photo-1548126032-079a0fb0099d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8c2lsayUyMHNraXJ0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
						brand: 'LUXE',
						title: '真丝印花半身裙',
						price: 1280,
						sales: 79,
						sizes: ['S', 'M', 'L']
					}
				],
				// 模拟更多商品数据
				allProducts: []
			};
		},
		created() {
			// 初始化模拟数据库，用于无限滚动加载功能演示
			this.initAllProducts();
		},
		methods: {
			// 初始化模拟数据库
			initAllProducts() {
				// 预先生成一些商品作为模拟数据源
				const mockProducts = [
					{
						id: 5,
						image: 'https://images.unsplash.com/photo-1588099768523-f4e6a5679d88?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y3JvcCUyMHRvcHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
						brand: 'CHIC',
						title: '夏季短款露脐上衣',
						price: 289,
						sales: 310,
						sizes: ['S', 'M', 'L']
					},
					{
						id: 6,
						image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y2FyZGlnYW58ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						brand: 'COZY',
						title: '纯色宽松针织开衫',
						price: 458,
						sales: 150,
						sizes: ['均码']
					},
					{
						id: 7,
						image: 'https://images.unsplash.com/photo-1593032534613-075f7cac1c05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8c3VpdCUyMG1lbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
						brand: 'FORMAL',
						title: '商务修身西装套装',
						price: 1680,
						sales: 65,
						sizes: ['48', '50', '52']
					},
					{
						id: 8,
						image: 'https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGNyb3AlMjB0b3B8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						brand: 'SPORTY',
						title: '运动拼色背心',
						price: 199,
						sales: 276,
						sizes: ['S', 'M', 'L']
					}
				];
				
				// 将初始数据保存到模拟数据库
				this.allProducts = mockProducts;
			},
			// 加载更多商品
			loadMoreProducts() {
				if (this.isLoading || !this.hasMore) return;
				
				this.isLoading = true;
				
				// 模拟网络请求延迟
				setTimeout(() => {
					// 如果还有更多产品可加载
					if (this.allProducts.length > 0) {
						// 每次加载4个商品
						const newProducts = this.allProducts.splice(0, 4);
						this.products = [...this.products, ...newProducts];
						
						// 如果模拟数据库中没有更多商品了，则标记没有更多了
						if (this.allProducts.length === 0) {
							this.hasMore = false;
						}
					} else {
						this.hasMore = false;
					}
					
					this.isLoading = false;
					this.page++;
				}, 1000);
			},
			goToProduct(productId) {
				// 跳转到商品详情页
				uni.navigateTo({
					url: `/pages/product_detail/product_detail?id=${productId}`
				});
			},
			goToCart() {
				uni.navigateTo({
					url: '/pages/cart/cart'
				});
			},
			goToMessages() {
				uni.navigateTo({
					url: '/pages/messages/messages'
				});
			},
			goToFeatured() {
				uni.navigateTo({
					url: '/pages/featured/featured'
				});
			},
			switchCategory(categoryId) {
				this.currentCategory = categoryId;
				// 切换分类时重置数据
				this.resetData();
				// 重新加载商品
				this.initAllProducts();
			},
			resetData() {
				this.page = 1;
				this.hasMore = true;
				this.products = [];
			},
			setSort(sortType) {
				if (sortType === 'price') {
					if (this.currentSort === 'price') {
						this.priceAsc = !this.priceAsc;
					} else {
						this.priceAsc = false;
						this.currentSort = 'price';
					}
					
					// 按价格排序
					this.products.sort((a, b) => {
						return this.priceAsc ? a.price - b.price : b.price - a.price;
					});
				} else {
					this.currentSort = sortType;
					
					if (sortType === 'sales') {
						// 按销量排序
						this.products.sort((a, b) => b.sales - a.sales);
					} else {
						// 默认排序，可以恢复原始顺序或其他逻辑
						this.products.sort((a, b) => a.id - b.id);
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.container {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding-bottom: 20px;
	box-sizing: border-box;
}

// 新设计的现代化顶部
.modern-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	background-color: #fff;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.search-section {
	flex: 1;
}

.search-bar-wrapper {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	height: 32px;
	border-radius: 16px;
	padding: 0 12px;
}

.search-placeholder {
	margin-left: 8px;
	font-size: 13px;
	color: #999;
}

.action-section {
	display: flex;
	align-items: center;
	margin-left: 10px;
}

.icon-wrapper {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ml-10 {
	margin-left: 10px;
}

// 分类导航
.category-scroll {
	background-color: #fff;
	white-space: nowrap;
	height: 44px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.category-list {
	display: flex;
	padding: 0 8px;
}

.category-item {
	display: inline-block;
	padding: 12px 16px;
	font-size: 14px;
	color: #666;
	position: relative;
	
	&.active {
		color: #ff6b6b;
		font-weight: 500;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 6px;
			left: 50%;
			transform: translateX(-50%);
			width: 16px;
			height: 2px;
			background-color: #ff6b6b;
			border-radius: 2px;
		}
	}
}

// 推荐商品区域
.featured-section {
	margin: 15px 0;
	padding: 0 15px;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	margin-top: 8px;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

.section-more {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #999;
}

.featured-swiper {
	height: 180px;
	border-radius: 8px;
	overflow: hidden;
}

.featured-item {
	position: relative;
	height: 100%;
}

.featured-image {
	width: 100%;
	height: 100%;
}

.featured-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	padding: 15px;
	color: #fff;
}

.featured-title {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 4px;
	display: block;
}

.featured-price {
	font-size: 14px;
	font-weight: bold;
}

// 筛选选项
.filter-options {
	display: flex;
	align-items: center;
}

.filter-option {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #666;
	margin-left: 15px;
	
	&.active {
		color: #ff6b6b;
		font-weight: 500;
	}
}

// 商品列表部分，移除scroll-view，改用普通view
.product-list {
	padding-bottom: 20px;
}

// 商品网格
.product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	padding: 0 15px;
}

.product-card {
	background-color: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s;
	margin-bottom: 10px;
	
	&:active {
		transform: scale(0.98);
	}
}

.product-image {
	width: 100%;
	height: 160px;
	display: block;
}

.product-info {
	padding: 10px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.product-brand {
	font-size: 11px;
	color: #888;
	margin-bottom: 4px;
}

.product-title {
	font-size: 13px;
	color: #333;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 6px;
	min-height: 34px;
}

.product-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
}

.product-price {
	font-size: 15px;
	font-weight: bold;
	color: #ff6b6b;
}

.product-action {
	display: flex;
	align-items: center;
}

// 加载更多
.loading-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15px 0;
	color: #999;
	font-size: 13px;
}

.loading-icon {
	margin-right: 5px;
	animation: spin 1s linear infinite;
}

// 没有更多数据提示
.no-more {
	text-align: center;
	color: #999;
	font-size: 12px;
	padding: 15px 0;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
</style> 